<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - 加载腾讯地图-EPSG:3857</title>
    <script src="../lib/ol6.4.3/ol.js"></script>
    <script type="text/javascript" src="http://www.megomap.com/ol/bd09.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../css/ol6.4.3/ol.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
<script>
    const projection = ol.proj.get('EPSG:3857');
    const projectionExtent = projection.getExtent();

    const resolutions = [
        140350.87719298244,
        70175.43859649122,
        35087.71929824561,
        17543.859649122805,
        8771.929824561403,
        4651.162790697675,
        2061.855670103093,
        1030.9278350515465,
        515.4639175257732,
        266.6666666666667,
        133.33333333333334,
        66.66666666666667,
        34.48275862068966,
        17.24137931034483,
        8.620689655172415,
        4.444444444444445,
        2.0202020202020203,
        1.0101010101010102,
        0.5050505050505051,
        0.2597402597402597,
        0.12987012987012986
    ];
    /*const maxZoom = 18;
    const resolutions = [];
    // 计算百度使用的分辨率
    for (let i = 0; i <= maxZoom; ++i) {
        resolutions[i] = Math.pow(2, maxZoom - i);
    }*/

    const tileGrid = new ol.tilegrid.TileGrid({
        origin: [-180, 85.05112877980659],
        resolutions: resolutions,
        extent: projectionExtent
    });

    const urlTemplate =
        // "https://rt{0-3}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0";
        `https://gisxyz.yzyby2018.com/tile?z={z}&x={x}&y={y}`;

    const baseLayer = new ol.layer.Tile({
        /*source: new ol.source.XYZ({
            url: `https://gisxyz.yzyby2018.com/tile?z={z}&x={x}&y={y}`
        })*/
        source: new ol.source.XYZ({
            tileUrlFunction: function (coordinate) {
                const z = coordinate[0];
                const x = coordinate[1];
                // const y = -2 ^ z - 2437 - 1;
                // console.log(coordinate[2]);
                const y = coordinate[2];
                // debugger;
                return (
                    urlTemplate
                        .replace('{x}', x)
                        .replace('{y}', y)
                        .replace('{z}', z)
                        .replace('{x16}', parseInt(x / 16))
                        .replace('{y16}', parseInt(y / 16))
                        // .replace("{1-4}", "1234".substr(((x << z) + y) % 4, 1))
                        .replace('{0-3}', '0123'.substr(((x << z) + y) % 4, 1))
                );
            }
        })
    });

    const openStreetLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: `https://tile.openstreetmap.org/{z}/{x}/{y}.png`
        })
    });

    const circlePoint = [13267534.181419311, 3799178.3247954827];//ol.proj.transform([116.384722, 39.889916], 'EPSG:4326', 'EPSG:3857');

    const iconFeature = new ol.Feature({
        // [110.23455490789895, 20.03350339866073],ol.proj.fromLonLat([109.88388,19.20959])
        geometry: new ol.geom.Point(circlePoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon(
            /** @type {olx.style.IconOptions} */ ({
                anchor: [10, 26],
                anchorXUnits: 'pixels',
                anchorYUnits: 'pixels',
                src: '../image/position_orange.png'
            })
        )
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const map = new ol.Map({
        layers: [
            baseLayer,
            // openStreetLayer,
            iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: circlePoint,
            // center: [0, 0],
            // projection: 'EPSG:3857',
            zoom: 12,
            maxZoom: 20,
            minZoom: 3,
            resolutions
        })
    });
    map.addEventListener('click', (evt) => {
        console.log(evt.coordinate);
    });
</script>
</html>